<template>
	<el-row class="full-container">
		<el-form ref="formRef" class="login-content" :model="ruleForm" :rules="rules" size="default" status-icon label-position="left"
			label-width="70">
			<div class="login-title">
				<span>艾赖可</span>
			</div>
			<el-form-item label="账号" prop="account">
				<el-input v-model="ruleForm.account" placeholder="请输入账号" @keyup.enter.prevent="login"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pass">
				<el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码" @keyup.enter.prevent="login"></el-input>
			</el-form-item>
			<el-form-item label="验证码" prop="code" class="code-box">
				<el-input v-model="ruleForm.code" placeholder="请输入验证码" @keyup.enter.prevent="login"></el-input>
				<div class="code" @click="getCode">
					<img :src="url" alt="验证码" />
				</div>
			</el-form-item>
			<!-- <el-form-item> -->
			<el-button type="primary" @click="login('ruleForm')" :loading="loading">{{ loading ? "登录中..." : "登录"
				}}</el-button>
			<!-- </el-form-item> -->
		</el-form>
	</el-row>
</template>

<script setup name="Login">
import { onMounted } from 'vue';

const { proxy } = getCurrentInstance();
const store = proxy.$pinia.state.value.store;
let loading = ref(false)

const formRef = ref()
let ruleForm = reactive({
	account: "test",
	pass: "1qaz2wsx",
	uuid: ''
})

//验证规则
const rules = {
	account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
	pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
};

const login = async () => {
	formRef.value.validate(async (valid) => {
		if (valid) {
			loading.value = true
			let res = await proxy.$post("adminLogin", ruleForm, false, false)
			loading.value = false
			if (res.code === 0) {
				store.token = res.data.token
				store.adminName = res.data.name
				localStorage.setItem('token', res.data.token)
				proxy.$router.push({ path: '/layout' });
			} else {
				getCode()
			}
		}
	});

}

onMounted(() => {
	getCode()
})

const url = ref('')
async function getCode() {
	ruleForm.uuid = uuid()
	let res = await proxy.$post("adminCaptcha", {
		uuid: ruleForm.uuid
	}, false, false)
	if (res.code === 0) {
		url.value = res.data.base64
	}
}

function uuid() {
	var s = []
	var hexDigits = "0123456789abcdefg!@#$&*_STUVWXYZ"
	let tmp = new Date().getTime()
	for (var i = 0; i < 24; i++) {
		let index = Math.floor(Math.random() * 0x20)
		s[i] = hexDigits.substring(index, index + 1)
	}
	s[14] = "4" // bits 12-15 of the time_hi_and_version field to 0010
	s[8] = s[13] = s[18] = "-"
	var uuid = s.join("")
	uuid = tmp + "-" + uuid
	return uuid
}


</script>

<style scoped lang="scss">
.full-container {
	width: 100%;
	height: 100%;
	background-image: url("../../assets/bg.webp");
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
	position: fixed;
}

.particles {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
}

.login-content {
	width: 300px;
	height: 280px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 8px;
	position: absolute;
	right: 100px;
	top: 50%;
	margin-top: -120px;
	z-index: 5;
	box-sizing: border-box;
	padding: 20px;
	color: #fff;

	::v-deep .el-form-item__label {
		color: #fff;
	}

	.login-title {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		margin-bottom: 20px;

		.logo-img {
			width: 70px;
			height: 70px;
			border-radius: 8px;
		}

		span {
			font-size: 18px;
			font-weight: bold;
			margin-left: 12px;
			letter-spacing: 1px;
		}
	}

	.el-button {
		width: 100%;
		margin-top: 10px;
	}

}

.code-box {
	position: relative;

	.code {
		width: 80px;
		height: 100%;
		position: absolute;
		right: -1px;
		top: 0;

		img {
			width: 100%;
			height: 100%;
			border-radius: 4px;
		}
	}
}
</style>
